<template>
  <div class="model-body">
    <div id="topBox">
      {{ code }}
    </div>
    <div id="cesiumContainer" class="Container"></div>
    <div class="message" v-if="showMessage" :class="{ isMax: showFull }">
      <div class="message-top">
        <h3>数据信息</h3>
        <div class="top-right">
          <span class="el-icon-minus" @click="hideMessage"></span>
          <span class="el-icon-full-screen" @click="showMax"></span>
        </div>
      </div>
      <el-tabs class="" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="设备信息" name="first">
          <ul class="info-list">
            <li class="item" v-for="(item, i) in basicInfo" :key="i">
              <template v-if="item.propertyName"
                ><span class="item-title">{{
                  item.propertyName
                }}</span></template
              >
              <template v-else
                ><span class="item-left">{{ item.propertyname }}</span
                ><span class="item-right">{{ item.provalue }}</span></template
              >
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="构件信息" name="second">
          <ul class="info-list">
            <li class="item" v-for="(item, i) in attributeList" :key="i">
              <template v-if="item.index"
                ><span class="item-title">{{
                  item.propertyName
                }}</span></template
              >
              <template v-else
                ><span class="item-left">{{ item.propertyname }}</span
                ><span class="item-right">{{ item.provalue }}</span></template
              >
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="构件类型" name="third">
          <ul class="info-list">
            <li class="item" v-for="(item, i) in type" :key="i">
              <template v-if="item.index"
                ><span class="item-title">{{
                  item.propertyName
                }}</span></template
              >
              <template v-else
                ><span class="item-left">{{ item.propertyname }}</span
                ><span class="item-right">{{ item.provalue }}</span></template
              >
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div
      class="hide-message"
      v-show="!showMessage && !firstShow"
      @click="showDialog"
    >
      <span>数据信息</span><span class="el-icon-arrow-up arrow-icon"></span>
    </div>
    <!-- <div class="load-box" v-if="loading">
      <div class="content">
        葛兰岱尔3D/BIM/GIS引擎正在为您打开模型<img
          src="@/assets/img/load.gif"
        />
      </div>
    </div> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      publicPath: process.env.VUE_APP_BASEURL,
      loading: true,
      code: "M521-11187",
      modelId: "3107^8592984",
      activeName: "first",
      showMessage: false,
      showFull: false,
      firstShow: true,
      needshow: true,
      basicInfo: [
        {
          propertyName: "基本信息",
          provalue: "",
        },
        {
          propertyname: "Equipment No.",
          provalue: "M521-11187",
        },
        {
          propertyname: "Equipment Name",
          provalue: "NO.2 RAW WATER MAIN PUMP",
        },
        {
          propertyname: "Equipment Name(Chinese)",
          provalue: "2號原水主泵",
        },
        {
          propertyname: "Maintenance Section",
          provalue: "Mech.Maint.(NTE1)",
        },
        {
          propertyname: "Equipment Type",
          provalue: "PUMP - MAIN RAW WATER",
        },
        {
          propertyname: "Location Name",
          provalue: "MUK WU NO.2 RAW WATER PUMPING STATION",
        },
        {
          propertyname: "Type Of Record",
          provalue: "Mechanical",
        },
        {
          propertyname: "Unit No.",
          provalue: "2",
        },
        {
          propertyname: "Serial No.",
          provalue: "81G314342",
        },
        {
          propertyname: "Manufacturer",
          provalue: "HITACHI",
        },
        {
          propertyname: "Risk Level",
          provalue: "Medium",
        },
        {
          propertyname: "Remarks",
          provalue:
            "Vertical mounted. direct coupled, 1-stage. REPLACEMENT OF UNIVERSAL JOINT SHAFT B07(PT.4)34",
        },
        {
          propertyName: "产量",
          provalue: "",
        },
        {
          propertyname: "FLOWRATE(I/s)",
          provalue: "2700~2700",
        },
        {
          propertyname: "HEAD(m)",
          provalue: "39.2~39.2",
        },
        {
          propertyname: "SPEED(rpm)",
          provalue: "490~490",
        },
        {
          propertyName: "详情",
          provalue: "",
        },
        {
          propertyname: "Drive/Coupling Type",
          provalue: "DIRECT COUPLED",
        },
        {
          propertyname: "Motor Power(kW)",
          provalue: "1400",
        },
        {
          propertyname: "Is PM.Item",
          provalue: "T",
        },
        {
          propertyname: "W.I.Number",
          provalue: "WI 23-M2",
        },
        {
          propertyname: "Equipment Status",
          provalue: "EX",
        },
        {
          propertyname: "Construction Type",
          provalue: "VERTICAL MOUNTED",
        },
        {
          propertyName: "使用方法",
          provalue: "",
        },
        {
          propertyname: "Reading Date",
          provalue: "31-0ct-2021",
        },
        {
          propertyname: "Reading Value",
          provalue: "35100.75",
        },
        {
          propertyname: "Unit of Reading",
          provalue: "HOUR",
        },
        {
          propertyname: "Perform Maintenance when Reading Value reaches",
          provalue: "40000",
        },
        {
          propertyname: "Last Maintenance Date",
          provalue: "2010/5/28",
        },
      ],
      attributeList: [],
      type: [],
      secretKey:
        "1a17098ce0d527114f73427bdfb5033633aa4802e15dfc49a29aa59c8f2497fa711bc068a62def56e79b0f4c61588fb258f53b51443014e323c61f1a9ce6901ea45755f94f48c51dc581ac8bda0b423bd53bbb94b89a5998e2877d468721051d28a57a569b31ede6433fcced0fd3b6aa8ed6a835d86c804e2522d775e79438293825403cfcdfb2e8e0030015bd5c73897869d86019e0500bb443d9b43e793a20df892ac5fbab881bf6b34a0d3b48e62299da383acb371030673a18f4f42a3e1ef21654bc56ed57d610df6c47a708c020420446a051fcfcfe6420a895151316b4e44d99e23ea1b1c037469c16f332fc0e0d4d42f852f24a3b893d0b7782ccdf4a2690c9c477d6c137ce7a6540f9cf4af6da3042080cb32ebaca86b3d3b04340f339b11b3331e22197ad369ae9518ca64971bf6546087c6d2fa49260085f53fca85b1923cb186fe0cea880fa9724d3c04df9942799c8a45db42c7b20200df1a7b858945f468f71ca7d258c47f45b34485a2edb350010e2f42cd5b388af45c6b070850288d284cbbbcd9a3bf27c345782f64ede570dbf3ac12e4c97f2634722da1e94be461fa6cffee2cee936b6b41848a0a62a7c90a82e2a397261d0710b0293567e1eb1dd7bd4d5a68a94867b381ae88ecd6668e8ca6b6d286dce7e5d799b0a175d5afe5554a4332203e774bed8a04535067c9aac0a18108055b1db541f70363b277050951ab91fcbccd8329463d92cd2f81b95abdf8d437c4965454914fcc7b07d28062bc2976948356e76d9d11fd5b479eb391b46cc93e66da10e0ba1fed735c8b1b1f086973f61ebd11fa087d237eeef238beb46c179323ae24d1650ef196ed32b1cdbecb9bf3ae2651ff226b8a2383977aeaabb9225d7f3a824b3fcde4d87c2b919fbc8df252c7fcba7ce8189fbc2d0c629f88d9f278bf80966ea7e9c1fbb4e1666022cbf60580684976c31d53287ef238beb46c179323ae24d1650ef196ebe9779ea7d8279835db3ba30824bde66d45b7947216c7923f6dd847ee2fc4afe1b23fcef307f4ace93a50a62d808c39097e1b6e2ec116ea4f85932ebe32567745b846b07c299915a7b61e5b39a0300e7184d8dbba49a8569a30af95bbcb8a935ccd8737a8d59b0cca4d53873574d062a1bf0a959feec2d17d451cf66012dddbcedbab42b7adcdde21cad87782b4e0b1824d736db704d8954950390941b9aaa80089e41bf1a87879de6cd674b6676107f3d4256820c37cd19030c6924517e4349f71e19f74e660313cf3630a2823a9a2d4ce0dce6f81f87eea1ccfaae84e9dbea030c6924517e4349b5024217bdf743a670fd5d571139e4f0e6cd674b6676107fc8b14b44ceeed441af4b194f05a956195b0d603c259172b75b1923cb186fe0ce5be04514c976edd0c12cc462769b2e685be04514c976edd04ca2ef020dc56bee8321afe91a1dcbb1afafd0506174e8680f18f43fcd13957e37bdb1221aa64295f230f78b7aa0c960753151533a2770446a6cb07b672285d204ba1ecd4a967f5dcb6b0c9432a8108f7d1f9f3c7343796941187054ec673ebdbd57ea3b34f9c6cc37bdb1221aa6429512b695fc8f5b4b6fc12cc462769b2e685be04514c976edd038d27dbe2e47e96b753151533a277044d80e0285b44b743f64d53d967da98ab0555e1e6d7d3c0468c8e6f7bb1e69ec27703c52805d982a9a7b7134e53eaa4f83b046182095e9d992f79b33aea9c3effb017d98bd95ced22c1d7f698eff81232620bc772fa7ae29a7d414a6ec983c937ed81e303cd60ec5e31c5c60194b7c51c25c322c7bf03d5c6a2c014184423e21699fd6d34f2a62e59aa4596f82cf86665b367e01045009c18a50fbde6b13f859564b7c9002a5b14cebb57369802f23c1aa6b290529357b344bbddc71cdaa364e3d2c5d270367a462a00b2683362e62c96332412be6114866e7334b7e3420a94f55d0e4ea15a24718f6487b889c4afb0657c6cdcaf3a7b4e9091dd0bba9719b0ed36d4f8db49a1cb6b45e3f8253971ef20b10b7b200fbc7c3d3f71e19f74e660313cf3630a2823a9a2dc2a17ec077fd21bf5125cdd7384aad1b3050717025af01dcfac91bea061f4ff4d8636a404c93c92c9ad3fe161773254f285f618f84d5ac97e6cd674b6676107fc8b14b44ceeed441af4b194f05a956194bd7fd5f13f06806",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const GISBIMDefaults = {
        //引擎初始化参数
        container: "cesiumContainer", //[必须]容器id
        showfps: false, //[可选]显示fps
        openearth: false, //[可选]开启场景
        imageryprovider: "tianditu_image", //[可选]gis底图
        openterrain: false, //[可选]开启地形
        maxspaceerror: 2000, //[可选]模型可视距离
        loading: false, //[可选]gis模式加载动画
        navigation: false, //[可选]开启陀螺仪
        bgcolor: Cesium.Color.fromCssColorString("rgba(0,0,0,0)"), //[可选]bim模式场景背景色
        selectedcolor: "#FF0000", //[可选]选中构件颜色
        throughwall: true, //[可选]相机是否穿墙
        stateSubpageUp: false,
        searchbox: false, //[可选]gis场景生效，gis场景下影像搜索显示
        mapbox: false, //[可选]gis场景生效，gis场景下影像切换显示
        secretkey: this.secretKey,
        sitepath: "../static/Cesium/",
        webglAlpha: true,
        colorBlendMode: 1, //0:HIGHLIGHT 1:REPLACE 2:MIX ，构件选中后的着色模式
      };
      var api = new API(GISBIMDefaults); //api对象后面调用接口要全程使用，控制好作用域
      api.Public.event("LEFT_CLICK", (click) => {
        api.Feature.getByEvent(click.position, (json) => {
          console.log(json);
          this.showWin(json.id);
        });
      });
      window.api = api;
      api.Model.add(
        "/701101/root.glt",
        "3107",
        () => {
          //模型加载中
          console.log("加载中……");
        },
        (data) => {
          //模型加载完成
          // 为给定 ID 的 user 创建请求
          //this.showWin(this.modelId);
          axios
            .get("http://gisbim3d.glendale.top/Ajax/GetmdlPropertyDetails", {
              params: {
                mid: this.modelId.split("^").join("_"),
                propertyTypeName: "properties",
              },
            })
            .then((response) => {
              const data = response.data.dtT;
              const type = [];
              let typeName = "";
              let attributeList = [];
              for (let i = 0; i < data.length; i++) {
                var propertySetName = data[i].propertySetName;
                delete data[i].children;
                if (type.indexOf(data[i].propertyTypeName) == -1) {
                  attributeList.push({
                    type: data[i].propertyTypeName,
                    content: [
                      {
                        propertyName: data[i].propertySetName,
                        index: "space",
                      },
                      data[i],
                    ],
                    setName: [data[i].propertySetName],
                  });
                  typeName = propertySetName;
                  type.push(data[i].propertyTypeName);
                } else {
                  var typeIndex = type.indexOf(data[i].propertyTypeName);
                  if (propertySetName == typeName) {
                    attributeList[typeIndex].content.push(data[i]);
                  } else {
                    attributeList[typeIndex].content.push({
                      propertyName: data[i].propertySetName,
                      index: "space",
                    });
                    attributeList[typeIndex].content.push(data[i]);
                    typeName = propertySetName;
                  }
                }
              }
              attributeList.map((item) => {
                if (item.type == "properties") {
                  this.attributeList = item.content;
                } else {
                  this.type = item.content;
                }
              });
              this.showWin(this.modelId);
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      );
    },
    showWin(id) {
      api.Feature.zoomTo(
        id,
        "3107",
        true,
        1,
        () => {
          if (this.needshow) {
            this.showMessage = true;
          }
          this.firstShow = false;
        },
        260,
        0,
        10,
        false,
        2
      );
    },
    handleClick() {},
    //隐藏信息
    hideMessage() {
      this.needshow = false;
      this.showMessage = false;
    },
    //
    showMax() {
      this.showFull = !this.showFull;
    },
    showDialog() {
      this.showMessage = true;
      this.needshow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.model-body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #f8f8f8;
  position: relative;
  #topBox {
    width: 240px;
    height: 44px;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 20;
    transform: translate(-50%, 0);
    border-radius: 0% 0% 40% 40%;
    background-position: center;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    font-weight: 600;
    color: #0d60b4;
    line-height: 44px;
  }
  .Container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .message {
    width: 32%;
    height: 85%;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(102, 102, 102, 0.1);
    border-radius: 8px;
    position: absolute;
    top: 80px;
    left: 20px;
    .message-top {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #efefef;
      display: flex;
      justify-content: space-between;
      padding: 0 10px 0 20px;
      h3 {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 550;
        color: #333333;
      }
      .top-right {
        span {
          font-size: 20px;
          margin: 0 9px;
          cursor: pointer;
        }
      }
    }
    .info-list {
      padding-left: 5px;
      height: calc(100% - 60px);
      overflow: auto;
      .item {
        display: flex;
        padding: 10px 5px;
        border-bottom: 1px solid #efefef;
        text-align: left;
        .item-title {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 550;
          font-style: italic;
          color: #666666;
          margin-left: 10px;
        }
        .item-left {
          flex: 2;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #666666;
          margin-left: 10px;
          word-break: break-all;
        }
        .item-right {
          flex: 3;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          word-break: break-all;
          padding-left: 14px;
        }
      }
    }
  }
  .hide-message {
    width: 120px;
    height: 40px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(102, 102, 102, 0.1);
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    .arrow-icon {
      margin-left: 20px;
      //font-size: 14px;
      font-weight: 500;
    }
  }
}
.message /deep/ .el-tabs__nav {
  padding-left: 20px;
}
.message /deep/ .el-tabs__active-bar {
  left: 20px;
}
.isMax {
  height: 100% !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}
/deep/.el-tabs {
  height: 100% !important;
}
/deep/.el-tabs__header {
  margin: 0 0 5px;
}
/deep/.el-tabs .el-tabs__content {
  height: calc(100% - 60px);
}
/deep/.el-tabs .el-tab-pane {
  height: 100%;
}
/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}
/deep/ .el-tabs__active-bar {
  background-color: #0d60b4;
}
</style>